<script setup>
import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
const inputLinked = ref()
const tableData = [
	{
		id: 1,
		radar: '雷达',
		src: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
		Usemembers: '马云',
		radarTitle: '雷达标题',
		NumberOfClicks: '3',
		auditStatus: '已审核',
		Modificationtime: '2022',
		Creationtime: '2022',
		operation: ''
	},
	{
		id: 2,
		radar: '雷达',
		src: '',
		radarTitle: '雷达标题',
		NumberOfClicks: '3',
		auditStatus: '已审核',
		Usemembers: '马云',
		Modificationtime: '2022',
		Creationtime: '2022',
		operation: ''
	},
	{
		id: 3,
		radar: '雷达',
		src: '',
		radarTitle: '雷达标题',
		NumberOfClicks: '3',
		auditStatus: '未通过',
		Usemembers: '马云',
		Modificationtime: '2022',
		Creationtime: '2022',
		operation: ''
	},
	{
		id: 4,
		radar: '雷达',
		src: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
		radarTitle: '雷达标题',
		NumberOfClicks: '3',
		auditStatus: '已审核',
		Usemembers: '马云',
		Modificationtime: '2022',
		Creationtime: '2022',
		operation: ''
	}
]
</script>
<template>
	<div class="linkStyle">
		<div>雷达链接(共40个)</div>
		<div class="linkStyleChild">
			<el-input v-model="inputLinked" class="w-50 m-2" placeholder="请输入要搜索的雷达标题" :suffix-icon="Search" />
			<el-button type="primary" style="margin-left: 20px">新建雷达链接</el-button>
		</div>
	</div>
	<!--  表格 -->
	<div class="tableStyle">
		<el-table :data="tableData" style="width: 100%; border-radius: 10px">
			<el-table-column prop="radar" label="雷达" width="240">
				<template #default="scope">
					<div style="display: flex; align-items: center" v-if="scope.row.src !== ''">
						<div>
							<div style="color: #13a7af">[共5条数据]</div>
							<el-avatar shape="square" :src="scope.row.src" />
						</div>
						<span style="margin-left: 10px">{{ scope.row.Messagecontent }}</span>
					</div>
					<div v-if="scope.row.src === ''">
						<div style="color: #13a7af">[共5条数据]</div>
						<div>测试</div>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="radarTitle" label="雷达标题" width="240" />

			<el-table-column prop="createdBy" label="创建人" width="240">
				<template #default="scope">
					<div class="app-words-box">
						<div class="app-flex-left">
							<MyIcon class="app-down-icon primary-font" name="Person" />
							<span class="app-gap-words-left-xs">{{ scope.row.Usemembers }}</span>
						</div>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="NumberOfClicks" label="点击人数" width="240" />
			<el-table-column prop="Creationtime" label="创建时间" width="240" />
			<el-table-column prop="auditStatus" label="审核状态" width="240">
				<template #default="scope">
					<el-tag class="ml-2" type="info" v-if="scope.row.auditStatus !== ''">
						<span class="app-gap-words-left-xs">{{ scope.row.auditStatus }}</span>
					</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="operation" label="操作">
				<template #default="scope">
					<div style="display: flex">
						<div>
							<el-button link type="primary" size="small">分享</el-button>
						</div>
						<div>
							<el-button link type="primary" size="small">数据</el-button>
						</div>
						<div>
							<el-button link type="primary" size="small" @click="emits('showEdit', scope.row)">编辑</el-button>
						</div>
						<div>
							<el-button link type="primary" size="small">删除</el-button>
						</div>
					</div>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>
<style scoped>
.linkStyle {
	display: flex;
	justify-content: space-between;
}
.linkStyleChild {
	display: flex;
	justify-content: space-between;
}
.tableStyle {
	margin: 20px 20px;
}
</style>
